<template>
  <div id="app">
    <h1>{{ msg }}</h1>

    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="桶名">
        <el-input v-model="bucketName" placeholder="桶名"></el-input>
      </el-form-item>
      <el-form-item label="对象名称">
        <el-input v-model="objectName" placeholder="对象名称"></el-input>
      </el-form-item>
      <el-button type="primary" @click="submit1()">删除一个对象</el-button>
    </el-form>

    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="桶名">
        <el-input v-model="bucketName" placeholder="桶名"></el-input>
      </el-form-item>
      <el-form-item label="对象列表">
        <el-input v-model="objectNameList" placeholder="对象列表"></el-input>
      </el-form-item>
      <el-button type="primary" @click="submit2()">删除多个对象</el-button>
    </el-form>

    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="对象 URL">
        <el-input v-model="URL" placeholder="URL"></el-input>
      </el-form-item>
      <el-button type="primary" @click="submit3()">根据URL 删除一个对象</el-button>
    </el-form>

    <p>{{data}}</p>

  </div>
</template>

<script>

  var OSS = require("oss-js-client")

  // Instantiate the OSS client with the endpoint
  var ossClient = new OSS.Client({
    // endPoint: "192.168.1.40",
    endPoint: "127.0.0.1",
    port: 9000,
    useSSL: false,
    accessKey: "username",
    secretKey: "password",
  });

  export default {
    name: "VueOSSObject",
    data() {
      return {
        bucketName: "mybucket2",
        objectName: "a.txt",
        objectNamePrefix: "",
        objectNameList: "a.txt,b.txt",
        formInline:{},
        URL: '',
        data: '',
        msg: "演示OSSClient-ObjectRemove 对象删除操作",
      };
    },
    methods: {

      //删除一个对象
      submit1: function () {
        ossClient.removeObject(this.bucketName, this.objectName, (err) => {
          if (err) {
            this.data= "Delete an object failure!"
            return console.log('Unable to remove object', err)
          }

          this.data= "Delete an object successfully!"
          console.log('Removed the object')
        });
      },

      //删除多个对象
      submit2: function () {

        //删除objectsList中的所有对象
        // var objectsList = ["a.txt","b.txt"];
        var objectsList = this.objectNameList.split(",");
        for (let i = 0; i < objectsList.length; ++i) {
          ossClient.removeObject(this.bucketName, objectsList[i], (err) => {
            if (err) {
              this.data= "Delete object failure!"
              return console.log('Unable to remove object', err)
            }
          });
        }
        this.data= "Delete object successfully!"
      },

      //删除对象
      submit3: function () {
        fetch(this.URL, {
          method: 'DELETE',
        })
          .then(response => response)
          .catch(error => console.error('Error:', error))
          .then(response => console.log('Success:', response));
      },
    },
  };
</script>

<style scope>
</style>
